<template>
	<div class="backgourndStyle ">
		<div class="content ">
			<div class="content_input">
				<div class="title">
					<p>杰誉律所管理系统</p>
				</div>
				<el-form
					:model="form" 
					:rules="rules2" 
					ref="form" 
					label-position="left" 
					label-width="0px" >
					<el-form-item 
						prop="username">
						<el-input 
							v-model="form.username" 
							clearable 
							placeholder="用户名">
						</el-input>
					</el-form-item>
					<el-form-item 
						prop="password">
						<el-input 
							v-model="form.password" 
							clearable 
							show-password 
							placeholder="密码">
						</el-input>
					</el-form-item>
					<div 
						class="content_button">
						<el-button 
							type="primary" 
							:loading="loading"
							@click.native.prevent="handleSubmit('form')">
							登录
						</el-button>
					</div>
				</el-form>
			</div>
		</div>
		
	</div>	
</template>
<script>
	import { mapGetters } from 'vuex'
	export default {
		computed: {
			...mapGetters(['logo', 'name'])
		},
		data() {
			return {
			loading: false,
			form: {
				username: '',
				password: ''
			},
			rules2: {
				username: [
					{ required: true, message: '请输入账号', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			},
			redirect: undefined,
		  }
		},
		watch: {
			$route: {
				handler: function(route) {
					this.redirect = route.query && route.query.redirect
				},
				immediate: true
			}
		},
		created() {
			var limitObj = {
				'IE': 10,
				'Edge': 12,
				'Firefox': 52,
				'Opera': 42,
				'Chrome': 56,
				'Safari': 7
			}
			var browserVersionStr = this.browserVersion().split(':');
			var name = browserVersionStr[0];
			var version = browserVersionStr[1];
			// console.log(66,browserVersionStr, name, version)
			if (!limitObj[name] || limitObj[name] && version < limitObj[name]) {
				this.$alert('你的浏览器版本太低了,建议您升级浏览器版本', '警告', {
					confirmButtonText: '确定',
					callback: action => {
						 window.open('https://ie.sogou.com/','_self') 
					}
				});
			}
		},
		mounted() {
		  window.addEventListener('keyup', (e) => {
			if (e.keyCode === 13) {
			  this.handleSubmit('form')
			}
		  })
		},
		methods: {
			// 登录
			handleSubmit(form) {
				if (this.loading) return
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.loading = true
						this.$store.dispatch('Login', this.form).then(res => {
							this.loading = false
							this.$router.push({ path: this.redirect || '/index' })
						}).catch(() => {
							this.loading = false
						})
					} else {
						return false
					}
				})
			},
			
			// 浏览器版本
			browserVersion() {
				var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
				var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
				var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //Edge浏览器
				var isFirefox = userAgent.indexOf("Firefox") > -1; //Firefox浏览器
				var isOpera = userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1; //Opera浏览器
				var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Edge") == -1 && userAgent.indexOf("OPR") == -1; //Chrome浏览器
				var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1 && userAgent.indexOf("Edge") == -1 && userAgent.indexOf("OPR") == -1; //Safari浏览器
				if (isIE) {
					var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
					reIE.test(userAgent);
					var fIEVersion = parseFloat(RegExp["$1"]);
					if (fIEVersion == 7) {
						return 'IE:7';
					} else if (fIEVersion == 8) {
					  	return 'IE:8';
					} else if (fIEVersion == 9) {
						return 'IE:9';
					} else if (fIEVersion == 10) {
						return 'IE:10';
					} else {
					 	return 'IE:6'; //IE版本<7
					}
				} else if (isEdge) {
					return 'Edge:' + userAgent.split('Edge/')[1].split('.')[0];
				} else if (isFirefox) {
					return 'Firefox:' + userAgent.split('Firefox/')[1].split('.')[0];
				} else if (isOpera) {
					return 'Opera:' + userAgent.split('OPR/')[1].split('.')[0];
				} else if (isChrome) {
					return 'Chrome:' + userAgent.split('Chrome/')[1].split('.')[0];
				} else if (isSafari) {
					return 'Safari:'; + userAgent.split('Safari/')[1].split('.')[0];
				} else {
					return -1; //不是ie浏览器
				}
			}
			
		}
		
  }
</script>

<style scoped>
/deep/ .el-input__inner{
	line-height: 45px !important;
	height: 45px !important;
}

.content {
	width: 500px;
	height: 400px;
	box-sizing: border-box;
	padding: 0 50px;
	border-radius: 5px;
	box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);
	background: rgba(255, 255, 255, 0.08);
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: mymove 0.3s ease-in-out  alternate;
	overflow: hidden;
	transition: 1.5s;
	border: 20px solid #f4c3bc;
}

@keyframes mymove {
	0% {
		width: 0px;
		height: 5px;
	}

	10% {
		width: 50px;
		height: 5px;
	}

	15% {
		width: 100px;
		height: 5px;
	}

	20% {
		width: 150px;
		height: 5px;
	}

	25% {
		width: 200px;
		height: 5px;
	}

	30% {
		width: 250px;
		height: 5px;
	}

	35% {
		width: 300px;
		height: 5px;
	}

	40% {
		width: 350px;
		height: 5px;
	}

	45% {
		width: 450px;
		height: 5px;
	}

	50% {
		width: 500px;
		height: 5px;
	}

	55% {
		height: 30px;
	}

	60% {
		height: 60px;
	}

	65% {
		height: 90px;
	}

	70% {
		height: 120px;
	}

	75% {
		height: 150px;
	}

	80% {
		height: 180px;
	}

	85% {
		height: 210px;
	}

	90% {
		height: 240px;
	}

	95% {
		height: 240px;
	}

	100% {
		height: 300px;
	}
}

.backgourndStyle{
	background: url('../../assets/img/bg.jpg') repeat fixed center;
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0
}

.content_input {
	width: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.content_button {
	margin-top: 30px;
}

/deep/ .el-input {
	margin-top: 10px;
}

.title {
	text-align: center;
	font-size: 24px;
	margin-bottom: 30px;
	font-weight: bold;
	color: #b5060d;
}

/deep/ .el-button--primary {
	width: 100%;
}

/deep/ .el-button{
	padding:15px 20px;
}

</style>